import React, { useState } from 'react';
import { Form, Input, Button, Radio, Upload } from 'antd';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import { message } from 'antd';
import type { UploadChangeParam } from 'antd/es/upload';
import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface';

const { TextArea } = Input;
function addHouseType() {
  const [loading, setLoading] = useState(false);
  const [imageUrl, setImageUrl] = useState<string>();

  const onFinish = (values: any) => {
    console.log('Success:', values);
  };
  const getBase64 = (img: RcFile, callback: (url: string) => void) => {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result as string));
    reader.readAsDataURL(img);
  };

  const beforeUpload = (file: RcFile) => {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
      message.error('You can only upload JPG/PNG file!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error('Image must smaller than 2MB!');
    }
    return isJpgOrPng && isLt2M;
  };
  const handleChange: UploadProps['onChange'] = (
    info: UploadChangeParam<UploadFile>,
  ) => {
    if (info.file.status === 'uploading') {
      setLoading(true);
      return;
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      getBase64(info.file.originFileObj as RcFile, (url) => {
        setLoading(false);
        setImageUrl(url);
      });
    }
  };
  const uploadButton = (
    <div>
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div style={{ marginTop: 8 }}>上传</div>
    </div>
  );

  return (
    <div>
      <Form
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 14 }}
        layout="horizontal"
        style={{ maxWidth: 600 }}
        onFinish={onFinish}
      >
        <Form.Item label="所属楼盘">
          <Input
            placeholder="五月花广场"
            style={{ width: '100px', border: 'none', outLine: 'none' }}
          />
        </Form.Item>
        <Form.Item label="*房型名称" name="title">
          <Input placeholder="房型名称" />
        </Form.Item>
        <Form.Item label="销售状态" name="status">
          <Radio.Group defaultValue="apple">
            <Radio value="apple"> 在售 </Radio>
            <Radio value="pear"> 未售 </Radio>
            <Radio value="Orange"> 售完 </Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item label="户型特色" name="feature">
          <TextArea rows={4} />
        </Form.Item>
        <Form.Item label="户型图" valuePropName="fileList">
          <Upload
            name="avatar"
            listType="picture-card"
            className="avatar-uploader"
            showUploadList={false}
            action="http://fangadmin.shbwyz.com/house/ajaxuploadimg.html"
            beforeUpload={beforeUpload}
            onChange={handleChange}
          >
            <div>
              {imageUrl ? (
                <img src={imageUrl} alt="avatar" style={{ width: '100%' }} />
              ) : (
                uploadButton
              )}
            </div>
          </Upload>
        </Form.Item>
        <Form.Item label="" style={{ marginLeft: '100px' }}>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}

export default addHouseType;
